<template>
  <div :style="styles.logo">
    <img
      src="https://mdn.alipayobjects.com/huamei_iwk9zp/afts/img/A*eco6RrQhxbMAAAAAAAAAAAAADgCCAQ/original"
      draggable="false"
      alt="logo"
      :style="styles['logo-img']"
    />
    <span :style="styles['logo-span']">AI Lab</span>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue';
import { theme } from 'ant-design-vue';

const { token } = theme.useToken();

const styles = computed(() => {
  return {
    logo: {
      display: 'flex',
      height: '72px',
      'align-items': 'center',
      'justify-content': 'start',
      padding: '0 24px',
      'box-sizing': 'border-box',
      // 添加渐变背景
      background: 'linear-gradient(to right, #222, #333)',
    },
    'logo-img': {
      width: '24px',
      height: '24px',
      display: 'inline-block',
    },
    'logo-span': {
      display: 'inline-block',
      margin: '0 8px',
      'font-weight': 'bold',
      // 修改文字颜色为更易读的颜色
      color: '#fff',
      'font-size': '16px',
    },
  };
});
</script>

<style scoped>
/* 可以在这里添加额外的样式 */
</style>
